<template>
  <div class="class_box">
    <div class="left">
      <el-menu :default-active="default_active">
        <el-menu-item
          v-for="item in list"
          :index="`node-${item.id}`"
          :key="item.id"
          @click="menu_item_click(item)"
          >
          <template #default>
            <span>{{ item.class_label }}</span>
            <span>共{{ item.num }}篇博客</span>
          </template>
          </el-menu-item
        >
      </el-menu>
    </div>
    <div class="right">
      <div
        class="right_box"
        v-infinite-scroll="load"
        :infinite-scroll-disabled="disabled"
        :infinite-scroll-distance="20"
      >
        <community
          v-for="(item) in data_list"
          :data="item"
          :is_like="blog_id_data[item.id]"
          :key="item.id"
        ></community>
      </div>
      <p v-if="loading" style="text-align: center">加载中.....</p>
      <p v-if="noMore" style="text-align: center">已经没有过多博客啦!</p>
    </div>
  </div>
</template>

<script setup>
import community from "@/components/blog/community/index.vue";
import { onMounted, ref, computed } from "vue";
import {
  get_all_class,
  get_num_of_blogs,
  get_class_related_blog,
} from "@/axios/home/index.js";
import { useIndexStore } from "@/store/model";
import { useRouter } from 'vue-router'

const store = useIndexStore();
//首先在setup中定义
const router = useRouter()

// 左边菜单栏的数据列表
const list = ref([]);
// 记录当前选中的类名所对应的博客的总数量
const count = ref(0);
// 存放当前页面所显示的博客数据的列表
const data_list = ref([]);
// 存放博客的id和是否点赞的字典
const blog_id_data = ref({});
// 当前是否是loading状态
const loading = ref(false);
// 当前页面数量
const page_number = ref(1);
// 当前页面上显示的数量
const current_count = ref(0);
// 左边菜单栏初始高亮什么数据
const default_active = ref("node-1");
// 当前选中的类名的id
const class_id = ref(0);
const disabled = ref(true);

onMounted(async () => {
  let data = await get_all_class();
  if (data.data.length !== 0) {
    list.value = data.data;
    default_active.value = `node-${data.data[0].id}`;
    class_id.value = data.data[0].id;

    await get_count();
    // if (count.value === 0) {
    //   return;
    // }

    const offset = get_offset();

    const blog_list = await get_class_related_blog({
      class_id: class_id.value,
      limit: offset.limit,
      offset: offset.offset,
      id: store.user_info.user_id,
    });
    if (blog_list.code === 200) {
      current_count.value = offset.limit + offset.offset;
      if (current_count.value < count.value) {
        disabled.value = false;
      }
      page_number.value = 1;
      data_list.value = blog_list.data.blog_list;
      blog_id_data.value = blog_list.data.blog_id_dict;
    }
  } else {
    list.value = [];
  }
});

const noMore = computed(() => {
  return data_list.value.length >= count.value;
});

const menu_item_click = async (item) => {
  if (item.id === class_id.value) {
    return;
  }

  data_list.value = [];
  blog_id_data.value = {};

  class_id.value = item.id;
  await get_count();
  // if (count.value === 0) {
  //   return;
  // }

  page_number.value = 1;

  const offset = get_offset();

  const blog_list = await get_class_related_blog({
    class_id: class_id.value,
    limit: offset.limit,
    offset: offset.offset,
    id: store.user_info.user_id,
  });
  if (blog_list.code === 200) {
    current_count.value = offset.limit + offset.offset;
    if (current_count.value < count.value) {
      disabled.value = false;
    }
    data_list.value = blog_list.data.blog_list;
    blog_id_data.value = blog_list.data.blog_id_dict;
  }
};

const load = async () => {
  // if (count.value === 0 || count.value <= current_count.value) {
  //   return;
  // }
  if (count.value <= current_count.value) {
    return;
  }
  loading.value = true;
  page_number.value++;
  const offset = get_offset();
  const blog_list = await get_class_related_blog({
    class_id: class_id.value,
    limit: offset.limit,
    offset: offset.offset,
    id: store.user_info.user_id,
  });
  if (blog_list.code === 200) {
    current_count.value = offset.limit + offset.offset;
    if (current_count.value < count.value) {
      disabled.value = false;
    } else {
      disabled.value = true;
    }
    data_list.value = [...data_list.value, ...blog_list.data.blog_list];
    blog_id_data.value = {
      ...blog_id_data.value,
      ...blog_list.data.blog_id_dict,
    };
  } else {
    page_number.value--;
  }
  loading.value = false;
};

const get_count = async () => {
  let num_data = await get_num_of_blogs({
    class_id: class_id.value,
  });
  count.value = num_data.data;
};

const get_offset = () => {
  // 如果当前标签没有数据就返回
  // if (count.value === 0) {
  //   return;
  // }
  // 如果小于等于5，那么就只有一页，且limit应该等于全部数据
  if (count.value <= 6) {
    return {
      limit: count.value,
      offset: 0,
    };
  }
  if (count.value > 5) {
    // 如果当前页面是第一页那么limit就等于5
    if (page_number.value === 1) {
      return {
        limit: 6,
        offset: 0,
      };
    } else {
      if (count.value - current_count.value < 2) {
        return {
          limit: count.value - current_count.value,
          offset: current_count.value,
        };
      }
      return {
        limit: 2,
        offset: 6 + (page_number.value - 2) * 2,
      };
    }
  }
};

</script>

<style lang="less" scoped>
.class_box {
  width: 100%;
  height: calc(100vh - 1.6rem);
  display: flex;
  justify-content: space-between;
  .left {
    width: 4rem;
    overflow-y: auto;
    .el-menu {
      width: 4rem;
      height: 100%;
      &::-webkit-scrollbar {
        width: 0px;
      }
      --el-menu-bg-color: @tml;
      --el-menu-text-color: @ls;
      --el-menu-active-color: @bs;
      --el-menu-hover-bg-color: rgba(255, 255, 255, 0);
      .el-menu-item {
        font-size: 0.2rem;
        font-weight: 900;
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .right {
    width: 10rem;
    background-color: @tmb;
    border-radius: 0.12rem;
    padding-bottom: 0.1rem;
    overflow-y: auto;
    // 滚动条整体部分
    &::-webkit-scrollbar {
      width: 0px;
    }
  }
}
</style>
